<template>
  <div style="background-color: #f2f4f7; overflow: hidden">
    <div class="statistics_head1" style="margin-top: 1.875rem">
      <div class="head-img inlineBlock">
        <img :src="dialogImageUrl" id="headCourseImage" />
      </div>
      <div class="txt-list">
        <div>{{ courseName }}</div>
        <p>课程教师:{{ TeachersName }}</p>
        <div style="margin-top: 20px">{{ courseDescribe }}</div>
      </div>
    </div>
    <div class="statistics_head">
      <ul class="staTabName">
        <li @click="Change(1)" :class="{ active: active == 1 }">基础数据</li>
        <!-- <li @click="Change(2)">学情统计</li> -->
        <li @click="Change(3)" :class="{ active: active == 3 }">学生成绩</li>
      </ul>
    </div>
    <div class="basicsData" v-if="active === 1" style="">
      <el-row
        type="flex"
        class="row-bg"
        justify="space-between"
        :gutter="20"
        style="margin-bottom: 20px"
      >
        <el-col :span="8">
          <div class="basicsData_item basicsColor_01">
            <div>学生人数</div>
            <div>
              <span>{{ countList.numberOfStudent }}</span> 人
            </div>
          </div>
          <div class="basicsData_item basicsColor_04">
            <div>考试</div>
            <div>
              <span>{{ countList.numberOfExam }}</span> 次
            </div>
          </div>
        </el-col>
        <el-col :span="8">
          <div class="basicsData_item1 basicsColor_02">
            <div>
              <div>章节</div>
              <div>
                <span>{{ countList.numberOfChapter }}</span> 题
              </div>
            </div>
            <div>任务点章节{{ countList.numOfCourseware }}个</div>
          </div>
        </el-col>
        <el-col :span="8">
          <div class="basicsData_item basicsColor_03">
            <div>班级数</div>
            <div>
              <span>{{ countList.numberOfClazz }}</span> 题
            </div>
          </div>
          <div class="basicsData_item basicsColor_06">
            <div>作业</div>
            <div>
              <span>{{ countList.numberOfTask }}</span> 次
            </div>
          </div>
        </el-col>
      </el-row>
    </div>
    <!-- <div v-if="active === 2">
      <div>我是学情统计</div>
    </div> -->
    <div v-if="active === 3" class="scoreTable">
      <div style="padding: 20px">
        <div class="navBox">
          <div style="display: flex; cursor: pointer">
            <div @click="radio = 1" :class="{ Isactive: radio == 1 }">
              学生成绩
            </div>
            <div
              style="margin-left: 20px"
              @click="radio = 2"
              :class="{ Isactive: radio == 2 }"
            >
              学生学习统计
            </div>
          </div>
          <el-select
            v-model="value"
            placeholder="请选择"
            @change="getPerStaGroupByClazzId()"
          >
            <el-option
              v-for="item in options"
              :key="item.id"
              :label="item.className"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </div>
        <div>
          <div>
            <el-table :data="tableData" style="width: 100%" v-if="radio == 1">
              <el-table-column prop="userName" label="用户名" width="180">
              </el-table-column>
              <el-table-column prop="userNum" label="学号" width="180">
              </el-table-column>
              <el-table-column label="章节任务点">
                <template slot-scope="scope">
                  {{ scope.row.compOfChapter }}/{{ scope.row.sumOfChapter }}
                </template>
              </el-table-column>
              <el-table-column label="课时测试">
                <template slot-scope="scope">
                  {{ scope.row.comOfChapterTest }}/{{
                    scope.row.sumOfChapterTest
                  }}
                </template>
              </el-table-column>
              <el-table-column label="考试">
                <template slot-scope="scope">
                  {{ scope.row.compOfExam }}/{{ scope.row.sumOfExam }}
                </template>
              </el-table-column>
              <el-table-column label="作业">
                <template slot-scope="scope">
                  {{ scope.row.compOfTask }}/{{ scope.row.sumOfTask }}
                </template>
              </el-table-column>
            </el-table>
          </div>
        </div>
        <div></div>
        <div>
          <el-table :data="tableData1" style="width: 100%" v-if="radio == 2">
            <el-table-column prop="userName" label="用户名" width="180">
            </el-table-column>
            <el-table-column prop="userNum" label="学号" width="180">
            </el-table-column>
            <el-table-column label="视频时长">
              <template slot-scope="scope">
                {{ scope.row.totalViewedTime }}
              </template>
            </el-table-column>
            <el-table-column label="课时测试">
              <template slot-scope="scope">
                {{ scope.row.gradeOfChapterTest }}
              </template>
            </el-table-column>
            <el-table-column label="考试">
              <template slot-scope="scope">
                {{ scope.row.gradeOfExam }}
              </template>
            </el-table-column>
            <el-table-column label="作业">
              <template slot-scope="scope">
                {{ scope.row.gradeOfTask }}
              </template>
            </el-table-column>
            <el-table-column label="总分">
              <template slot-scope="scope">
                {{ scope.row.grade }}
              </template>
            </el-table-column>
            
          </el-table>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { HttpManagerStudent } from "../../../request/student.js";
import { HttpManager } from "../../../request/Teacher.js";
export default {
  data() {
    return {
      active: 1,
      progress: "",
      tableData: [],
      tableData1: [],
      countList: {},
      courseName: "",
      courseDescribe: "",
      dialogImageUrl: "",
      CourseList: [],
      TeachersName: "",
      options: [],
      value: "",
      radio: 1,
    };
  },
  methods: {
    Change(val) {
      this.active = val;
      // console.log(val);
    },
    changeProgress(val) {
      this.progress = val;
    },
    //教师根据课程id与班级id获取班级学生的学习进度
    getAllStudentLearningProcess() {
      var parmas = {
        clazzId: this.value,
        courseId: localStorage.getItem("ClassId"),
        pageNum: 0,
      };
      HttpManager.getAllStudentLearningProcess(parmas).then((e) => {
        console.log(e);
        this.tableData1 = e.data.data;
      });
    },
    //教师根据课程id与班级id获取班级学生成绩分析
    getPerStaGroupByClazzId() {
      // alert(1);
      var parmas = {
        clazzId: this.value,
        courseId: localStorage.getItem("ClassId"),
        pageNum: 0,
      };
      HttpManager.getPerStaGroupByClazzId(parmas).then((e) => {
        console.log(e);
        this.tableData = e.data.data;
      });
    },
    //获取统计信息
    getCourseStatisticsBasicInformation() {
      var pamas = {
        courseId: localStorage.getItem("ClassId"),
      };
      HttpManager.getCourseStatisticsBasicInformation(pamas).then((e) => {
        console.log(e);
        this.countList = e.data.data;
      });
    },
    //获取课程信息
    getCourseInfByCourseId() {
      var parmas = {
        courseId: localStorage.getItem("ClassId"),
      };
      HttpManager.getCourseInfByCourseId(parmas).then((e) => {
        console.log(e);
        this.CourseList = e.data.data;
        (this.courseName = e.data.data.courseName),
          (this.courseDescribe = e.data.data.courseDescribe),
          (this.dialogImageUrl = e.data.data.courseImg);
      });
    },
    //获取教师名称
    getTeachersNameByCourseId() {
      var parmas = {
        courseId: localStorage.getItem("ClassId"),
      };
      HttpManagerStudent.getTeachersNameByCourseId(parmas).then((e) => {
        this.TeachersName = e.data.data.join(",");
      });
    },
    //获取班级列表
    getClazzByCourseId() {
      var parmas = {
        courseId: localStorage.getItem("ClassId"),
      };
      HttpManager.getClazzByCourseId(this.qs.stringify(parmas)).then((e) => {
        console.log(e);
        this.options = e.data.data;
        this.value = this.options[0].id;
        this.getPerStaGroupByClazzId();
        this.getAllStudentLearningProcess();
      });
    },
  },
  created() {
    this.getCourseStatisticsBasicInformation();
    this.getCourseInfByCourseId();
    this.getTeachersNameByCourseId();
    this.getClazzByCourseId();
  },
};
</script>

<style scoped>
.statistics_head1 {
  /* border: 1px solid #000; */
  /* position: relative; */
  display: flex;
  background: rgba(255, 255, 255, 1);
  box-shadow: 0px 2px 17px 0px rgb(237 238 240 / 50%);
  border-radius: 8px;
  font-size: 16px;
  line-height: 20px;
  padding-bottom: 40px;
  width: 90%;
  margin: 0 auto;
  margin-bottom: 16px;
  margin-top: 2.5rem;
}
.txt-list > p {
  margin-top: 10px;
  color: rgba(0, 0, 0, 0.411);
}

.head-img {
  width: 230px;
  height: 130px;
  padding: 40px 20px 14px 40px;
}

/* .inlineBlock {
		display: inline-block;
	}
 */
.head-img img {
  width: 255px;
  height: 150px;
  border-radius: 4px;
}
.Isactive {
  color: #00b6b4;
  cursor: pointer;
  font-weight: 500;
  font-size: 16px;
}

.txt-list {
  /* border: 1px solid #000; */
  margin-left: 2.5rem;
  width: 62.5rem;
  color: #000;
  margin-top: 40px;
}

.statistics_head {
  /* border: 1px solid #000; */
  height: 60px;
  background: #ffffff;
  border-radius: 8px;
  -webkit-box-shadow: 0 2px 17px 0 rgb(237 238 240 / 50%);
  box-shadow: 0 2px 17px 0 rgb(237 238 240 / 50%);
  width: 90%;
  margin: 0 auto;
}

.staTabName {
  height: 60px;
  line-height: 60px;
  padding-left: 20px;
}

.fl {
  float: left;
}

.staTabName {
  display: flex;
  list-style: none;
}

.staTabName li {
  margin-left: 2.25rem;
}

.active {
  color: #131b26;
  font-weight: 600;
  position: relative;
  cursor: pointer;
}

.active:after {
  content: "";
  display: block;
  width: 34px;
  height: 4px;
  background: #00b6b4;
  border-radius: 1.5px;
  position: absolute;
  bottom: 0;
  left: 50%;
  margin-left: -17px;
}

.basicsData {
  width: 90%;
  margin: 30px auto 0;
}

.man {
  width: 100%;
  background-color: #00b6b4;
  /* height: 100vh; */
}

.basicsData_item {
  width: 100%;
  height: 187px;
  color: #fff;
  border-radius: 8px;
  margin-top: 1.875rem;
  box-sizing: border-box;
  padding: 2.5rem;
}

.basicsData_item1 {
  width: 100%;
  height: 400px;
  color: #fff;
  border-radius: 8px;
  margin-top: 1.875rem;

  box-sizing: border-box;
  padding: 2.5rem;
  /* display: flex; */
}

.basicsColor_01 {
  background-color: #67dac1;
  /* left: 0;
		top: 0; */
}

.basicsColor_04 {
  background-color: #46c8e8;
  /* left: 0;
		top: 207px; */
}

.basicsColor_02 {
  background-color: #fe9f7f;
  /* left: 453px;
		top: 0; */
}

.basicsColor_03 {
  background-color: #fb7293;
  /* left: 806px;
		top: 0; */
}

.basicsColor_06 {
  background-color: #d2aaf2;
  /* left: 806px;
		top: 208px; */
}

.basicsData_item > div {
  font-size: 1.25rem;
}

/* .basicsData_item1>div{
		
	}
	.basicsData_item1>div:nth-child(2) {
		
	}
 */
.basicsData_item > div:nth-child(2) {
  margin-top: 2.5rem;
}

/* .basicsData_item1>div:nth-child(2)>span {
		
	} */

.basicsData_item > div:nth-child(2) > span {
  font-size: 22px;
}
.scoreTable {
  width: 90%;
  margin: 30px auto 0;
  height: 100vh;
  background-color: white;
  border-radius: 8px;
}
.navBox {
  padding-top: 10px;
  display: flex;
  justify-content: space-between;
}
.progressText {
  margin-left: 10px;
}
.scoreText {
  /* border: 1px solid #000; */
  margin-right: 10px;
}
.progressText :hover {
  background-color: #8d8db7;
}
.scoreText :hover {
  color: blue;
}
</style>
